<script lang="ts" setup>
// #region 引入包, 函数和组件
import { ref } from 'vue'
import LayoutHeader from '@/components/LayoutHeader.vue' // 头部布局
import { reactive } from 'vue'
import ListSearch from './components/ListSearch.vue' // 查询部分
import ListTable from './components/ListTable.vue' // 列表部分
import ListPagination from './components/ListPagination.vue' // 分页器部分
import { queryListApi } from '@/service'
import type { QuertListItem, QuertListParams } from '@/service/type'

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)

// #endregion

// #region // 变量
const form = reactive<QuertListParams>({
  username: undefined,
  age: undefined,
  sex: undefined,
  email: undefined,
  pagesize: 5,
  page: 1,
})

export type Form = typeof form

const data = ref<QuertListItem[] | null>(null)
const total = ref<number>(0)
// #endregion

// #region // 函数
const queryList = async () => {
  try {
    const res = await queryListApi(form)
    console.log(res)
    data.value = res.data.values.list
    total.value = res.data.values.total
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
// 请页面调一次查询接口
queryList()
// #endregion
</script>

<template>
  <div class="list">
    <LayoutHeader>
      <list-search v-model:form="form" @queryList="queryList"></list-search>
      <list-table :form="form" @queryList="queryList" :data></list-table>
      <list-pagination @queryList="queryList" v-model:form="form" :total></list-pagination>
    </LayoutHeader>
  </div>
</template>

<style lang="scss" scoped>
.list {
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .el-table {
    overflow-y: hidden;
  }
}
</style>
